// 引入connect
import {connect} from "react-redux";
import React, { Component } from 'react';


import {createIncrementAction,createDecrementAction,createAsyncIncrementAction} from "../../redux/count_action.js";

/**
 * mapStateToProps函数返回的是一个对象，用于传递状态
 */
// function mapStateToProps(state){
//     return {
//         count:state
//     };
// };

/*
*  mapDispatchToProps函数返回的是一个对象，用于操作状态的方法
*/
// function mapDispatchToProps(dispatch){
//     return {
//         increment:(data)=>{
//             dispatch(createIncrementAction(data));
//         },
//         decrement:(data)=>{
//             dispatch(createDecrementAction(data));
//         },
//         asyncIncrement:(data,time)=>{
//             dispatch(createAsyncIncrementAction(data,time));
//         }
//     };
// };


// 创建Count组件
class Count extends Component {
    state={
        carName:"长安univ-2.0T--亚光风暴灰"
    };
    increment=()=>{
        const {value}=this.selectNumber;
        this.props.increment(value*1);
    };
    decrement=()=>{
        const {value}=this.selectNumber;
        this.props.decrement(value*1);
    };
    incrementIfOdd=()=>{
        const {value}=this.selectNumber;
        if(this.props.count % 2 !== 0){
            this.props.increment(value*1);
        }
    };
    incrementAsync=()=>{
        const {value}=this.selectNumber;
        this.props.asyncIncrement(value*1,500);
    };
    render() {
        // console.log(this.props);
        return (
            <div>
                <h2>当前求和为：{this.props.count}</h2>
                <select ref={(currentNode)=>{this.selectNumber=currentNode}}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当求和结果为基数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    };
};


// export default connect(
//     (state)=>{
//         return {
//             count:state
//         };
//     },
//     (dispatch)=>{
//         return {
//             increment:(data)=>{
//                 dispatch(createIncrementAction(data));
//             },
//             decrement:(data)=>{
//                 dispatch(createDecrementAction(data));
//             },
//             asyncIncrement:(data,time)=>{
//                 dispatch(createAsyncIncrementAction(data,time));
//             }
//         };
//     }
// )(CountUI);
export default connect(
    (state)=>{
        return {
            count:state
        };
    },
    {
        increment:createIncrementAction,
        decrement:createDecrementAction,
        asyncIncrement:createAsyncIncrementAction
    }
)(Count);